<!--
封装通用的echart组件
chart-->
<template>
    <div :id="chartId" class="chart-wrapper"></div>
</template>

<script>
// import { getChartsize } from './chartFontSize';

export default {
    name: 'chart',
    components: {},
    props: {
        // chartId
        chartId: {
            type: String,
        },
        // 配置项
        options: {
            type: Object,
        },
    },
    watch: {
        // 配置项改变重新加载echarts
        options: {
            deep: true,
            handler() {
                this.initChart();
            },
        },
    },
    data() {
        return {
            chartEle: null, // echarts实例
        };
    },
    methods: {
        // 初始化echarts
        initChart() {
            if (document.getElementById(this.chartId)) {
                this.$echarts.dispose(document.getElementById(this.chartId));
                const { options } = this;
                this.barContainer = document.getElementById(this.chartId);
                this.chartEle = this.$echarts.init(this.barContainer);
                this.chartEle.setOption(options);
                // 点击事件
                this.chartEle.on('click', (params) => {
                    const {
                        seriesName,
                        componentSubType,
                        dataIndex,
                    } = params;
                    if (seriesName === '故障件数' && componentSubType === 'bar') {
                        // window.console.log('echarts --- click', params, dataIndex);
                        this.$store.commit('SET_LIMIT', new Date().getTime());
                        this.$store.commit('SET_MONTH', dataIndex + 1);
                    }
                });
                // 解决100px问题
                this.$nextTick(() => {
                    this.chartEle.resize();
                });
            }
        },
    },
    mounted() {
        // 初始化
        this.initChart();
    },
    beforeDestroy() {
        // 页面销毁 echats销毁
        if (this.chartEle) {
            this.$echarts.dispose(this.chartEle);
            this.chartEle = null;
        }
    },
};
</script>
<style lang='scss' scoped>
.chart-wrapper {
    width: 100%;
    height: 100%;
}
.chart-wrapper>div {
    width: 100%;
    height: 100%;
}
</style>
